<template>
	<view class="container">
		<view class="title">
			注册
		</view>
		<view class="login">
			<view>
				<uv-input placeholder="请输入手机号" border="bottom" v-model="loginCommit.mobile">
					<!-- vue3模式下必须使用v-slot:prefix -->
					<template v-slot:prefix>
						<uv-text text="手机号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ǀ&nbsp;&nbsp;&nbsp;&nbsp;"
							margin="0 3px 0 0" color="#6d6d6d"></uv-text>
					</template>
					<!-- vue3模式下必须使用v-slot:suffix -->
					<template v-slot:suffix>
						<!-- 						<uv-code ref="uCode" @change="codeChange" seconds="20" changeText="X秒重新获取哈哈哈"></uv-code> -->
						<button class="phone_num" :plain="true" style="color: #008BFF" open-type="getPhoneNumber"
							@getphonenumber="getPhoneNumber">获取手机号</button>
					</template>
				</uv-input>
			</view>

			<view class="code">
				<uv-input placeholder="获取验证码" v-model="loginCommit.code" border="bottom">
					<!-- vue3模式下必须使用v-slot:prefix -->
					<template v-slot:prefix>
						<uv-text text="验证码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ǀ&nbsp;&nbsp;&nbsp;&nbsp;"
							margin="0 3px 0 0" color="#6d6d6d"></uv-text>
					</template>
					<template v-slot:suffix>
						<uv-code ref="uCodeRef" @change="codeChange" :seconds="countTime"
							:changeText="`${countTime} 秒重新获取`"></uv-code>
						<button class="code_button" style="color: #008BFF;" @click="getVerificationCode"
							:plain="true">{{contantTxt}}</button>
					</template>
				</uv-input>
			</view>
			<view class="code" @click="ref1">
				<uv-input placeholder="密码不能少于10位" v-model="loginCommit.password" :password="data.isPasswordHidden"
					border="bottom">
					<!-- vue3模式下必须使用v-slot:prefix -->
					<template v-slot:prefix>
						<uv-text
							text="密码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ǀ&nbsp;&nbsp;&nbsp;&nbsp;"
							margin="0 3px 0 0" color="#6d6d6d"></uv-text>
					</template>
					<template v-slot:suffix>
						<uv-icon :name="data.iconName" @click="iconName" size="20"></uv-icon>
					</template>
				</uv-input>
			</view>

			<view class="scan">
				<view class="scan_image" @click="scanCode">
					<image style="width: 48rpx;height:48rpx;" src="../../static/扫一扫.png"></image>
					<view class="scan_font">
						扫码绑定
					</view>
				</view>
			</view>
			<view class="submit">
				<button class="login_button" @click="commit">注 册</button>
			</view>
			<uv-toast ref="toast"></uv-toast>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from "vue"
	import useGetGlobalProperties from '@/util/useGlobal.js'
	const url = useGetGlobalProperties().$https;
	const toast = ref();
	const ref1 = () => {
		toast.value.show({
			type: 'success',
			message: "",
			position: 'top'
		});
	}
	const iconName = () => {
		data.isPasswordHidden = !data.isPasswordHidden;
		console.log("点击了password = ", data.isPasswordHidden)
		data.iconName = data.isPasswordHidden == true ? 'eye-off' : 'eye';
		console.log("点击了", data.iconName)
	}
	const scanCode = () => {
		console.log("点击了扫码")
		uni.scanCode({
			success: (res) => {
				console.log('条码类型：' + res.scanType);
				console.log('条码内容：' + res.result);
			}
		});
	}
	const getCode = () => {

	}
	const userInfo = ref();


	const data = reactive({
		loginCode: '',
		isPasswordHidden: true,
		iconName: 'eye',
		contantTxt: '获取验证码',
		mobile: '',
		unicode: '',
		allowRequest: true
	})
	const loginCommit = reactive({
		mobile: '',
		code: '',
		password: '',
		bindLocation: '',
		bindLocation: 'BReADbapEsM6pSh0Adywxg==',
		wxCode:''
	})
	const commit = () => {
		if (loginCommit.bindLocation==='') {
			toast.value.show({
				type: 'error',
				message: "请扫码绑定位置!",
				position: 'top'
			})
			return;
		}
		uni.showLoading({
			title: 'loading'
		});
		uni.request({
			url: url+'/wxApi/user_login/register',
			method: 'POST',
			data: loginCommit,
			success: (e) => {
				console.log(e);
				if (e.data.data != null) {
					uni.hideLoading();
					uni.setStorageSync('userInfo',e.data.data)
					console.log('userInfo',e.data.data)
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else {
					uni.hideLoading();
					toast.value.show({
						type: 'error',
						message: e.data.msg,
						position: 'top'
					});
				}

			}
		})




	}
	const countTime = ref(60);
	const contantTxt = ref('获取验证码');
	const uCodeRef = ref();

	const codeChange = (text) => {
		contantTxt.value = text;
	};

	const getVerificationCode = () => {
		if (!loginCommit.mobile) {
			uni.showToast({
				title: '手机号码为空',
				duration: 2000,
				icon: 'error'
			});
			return;
		}
		if (!/^1[3456789]\d{9}$/.test(loginCommit.mobile)) {
			uni.showToast({
				title: '手机号格式错误',
				duration: 2000,
				icon: 'error'
			});
			return;
		}
		if (countTime.value <= 0) {
			countTime.value = 60;
		}
		if (!data.allowRequest) {
			return;
		}
			data.allowRequest = false;
			uni.request({
				url: url+"/wxApi/common/code/sms?mobile=" + loginCommit.mobile,
				method: "GET",
				success: (res) => {
					console.log(res);
					console.log("进来了");
					uni.showLoading({
						title: "正在获取验证码"
					});
					setTimeout(() => {
						uni.hideLoading();
						contantTxt.value = "重新发送";
						uCodeRef.value.start();
					}, 1000);
				}
			})
		

		const countDown = setInterval(() => {
			countTime.value--;
			if (countTime.value <= 0) {
				clearInterval(countDown);
				countTime.value = 60;
				data.allowRequest = true;
			}
		}, 1000);
	};

	const getPhoneNumber = (e) => {
		console.log(e);
		if (e.detail.errMsg == "getPhoneNumber:ok") {
			uni.request({
				url: "http://localhost:9999/wxApi/user_login/isRegister",
				method: "POST",
				data: e.detail.code,
				header: {
					'Authorization': 'Bearer 661da7e3-122f-4bd6-8ed7-d5ed580819b1' //自定义请求头信息
				},
				success: (res) => {
					if (res.data.errorinfo == null) {
						console.log("手机号返回" + JSON.stringify(res.data)); // 这个里面就有手机号了
						
					}
				}
			})
		}
	}

	onMounted(() => {
		loginCode();
	})
	const loginCode = () => {
		uni.login({
			provider: 'weixin',
			onlyAuthorize: true,
			success: res => {
				console.log(res, '登录成功')
				data.loginCode = res.code;
				loginCommit.wxCode = res.code;
				console.log("code=" + res.code);
				console.log("data.lgoincode=" + data.loginCode);
			}
		})
	}
</script>

<style>
	.login_button {
		width: 675rpx;
		height: 96rpx;
		background: #a5e0ff;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		/* 水平居中对齐 */
		align-items: center;
		/* 垂直居中对齐 */
		margin-top: 80rpx;

	}

	.submit {}

	.scan_font {
		margin-left: 16rpx;
	}

	.scan {
		margin-top: 48rpx;
	}

	.scan_image {
		display: flex;
		justify-content: center;
		/* 水平居中对齐 */
		align-items: center;
		/* 垂直居中对齐 */
	}

	.phone_num {
		border: none;
		background-color: #fff;
		width: 220rpx;
		height: 57rpx;
		font-size: 26rpx;
	}

	.code_button {
		border: none;
		background-color: #fff;
		width: 220rpx;
		height: 57rpx;
		font-size: 26rpx;
	}

	.code {
		margin-top: 50rpx;
	}

	.container {
		font-family: my-font;

	}

	.login {
		position: relative;
		top: 260rpx;
		padding: 0 40rpx;
	}

	/* 在对应的样式文件中添加以下样式 */
	.no-border-input {
		border: none;
		background-color: transparent;
		padding: 0;
		margin-left: 10rpx;
	}

	.title {
		width: 288rpx;
		height: 64rpx;
		font-size: 48rpx;
		position: relative;
		top: 168rpx;
		left: 40rpx;
	}
</style>